import React from 'react';
import {
  Calendar,
  Button,
  Card,
  Divider,
  Select,
  Modal,
  Input,
  Form,
  DatePicker,
  Collapse, message, Spin
} from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import styles from './style.less';
import { FormInstance } from 'antd/lib/form';
// @ts-ignore
import { getList, save } from "@/services/event";
import {SettingOutlined} from "@ant-design/icons";
import {dateTimeFormat} from "@/utils/date";

const { Option } = Select;
const { TextArea } = Input;
const { Panel } = Collapse;

const genExtra = () => (
  <SettingOutlined
    onClick={event => {
      // If you don't want click extra trigger collapse, you can prevent this:
      event.stopPropagation();
    }}
  />
);

export default class EventNode extends React.Component {
  formDOM: FormInstance<any> | null = null;

  state = {
    value: dateTimeFormat(new Date()),
    selectedValue: null,
    spinning: false,
    modalVisible: false,
    modalLoading: false,
    eventList: []
  };

  componentDidMount() {
    this.setState({spinning: true});
    getList(Object.assign({
      remindTime: this.state.value
    })).then((response: any) => {
      if (response.code === 0) {
        this.setState({
          eventList: response.data.records,
          spinning: false
        })
      }
    })
  }

  onPanelChange(value: any, mode: any) {
    console.log(value, mode);
  }

  onSelect = (value: any) => {
    this.setState({
      value,
      selectedValue: value,
      spinning: true
    });
    getList(Object.assign({
      remindTime: value.format('YYYY-MM-DD hh:mm:ss')
    })).then((response: any) => {
      if (response.code === 0) {
        this.setState({
          eventList: response.data.records,
          spinning: false
        })
      }
    })
  }

  handleModalOpen = () => {
    this.setState({ modalVisible: true });
  };

  handleModalCancel = () => {
    this.setState({ modalVisible: false });
  };

  handleFormSubmit = () => {
    this.setState({
      modalLoading: true,
      spinning: true
    })
    const fields = this.formDOM?.getFieldsValue(['title', 'type', 'remindTime', 'content'])
    fields.remindTime = fields.remindTime.format('YYYY-MM-DD hh:mm:ss');
    save(fields).then((response: any) => {
      if (response.code === 0) {
        message.success("添加成功！");
        getList().then((response: any) => {
          if (response.code === 0) {
            this.setState({
              eventList: response.data.records,
              spinning: false
            })
          }
        })
      } else {
        message.error("添加失败！")
      }
    }).catch(() => {
      message.error("添加失败！")
    }).finally(() => {
      this.setState({
        modalVisible: false,
        modalLoading: false
      })
    });
  };

  render() {

    const {eventList, modalVisible, modalLoading, spinning } = this.state

    return (
      <PageContainer>
        <Spin spinning={spinning}>
        <div className={styles.box}>
          <div className={styles.box_jz}>
            <div className={styles.box_calendar}>
              <Calendar
                fullscreen={false}
                onPanelChange={this.onPanelChange}
                onSelect={this.onSelect}
              />
            </div>
            <div className={styles.box_msg}>
              <Card>
                <Button type="primary" onClick={this.handleModalOpen}>
                  添 加
                </Button>
                <Divider orientation="left">我的待办</Divider>
                <Collapse>
                  {
                    eventList.map((item: any, index: number) => (
                      <Panel header={item.title} key={index} extra={genExtra()}>
                        <p>{item.content}</p>
                      </Panel>
                    ))
                  }
                </Collapse>
                <Modal
                  title="添加待办事项"
                  visible={modalVisible}
                  onCancel={this.handleModalCancel}
                  footer={[
                    <Button type="primary" onClick={this.handleFormSubmit} loading={modalLoading}>
                      提交
                    </Button>
                  ]}
                >
                  <Form
                    name="basic"
                    initialValues={{remember: true}}
                    ref={(el) => {
                      this.formDOM = el;
                    }}
                  >
                    <Form.Item
                      label="标题"
                      name="title"
                      rules={[{required: true, message: '请输入标题!'}]}
                    >
                      <Input/>
                    </Form.Item>

                    <Form.Item
                      label="优先级"
                      name="type"
                      rules={[{required: true, message: '请输入标题!'}]}
                    >
                      <Select style={{width: 120}}>
                        <Option value="error">紧急</Option>
                        <Option value="warning">主要</Option>
                        <Option value="success">次要</Option>
                        <Option value="default">不重要</Option>
                      </Select>
                    </Form.Item>

                    <Form.Item
                      label="时间"
                      name="remindTime"
                      rules={[{required: true, message: '请输入时间!'}]}
                    >
                      <DatePicker showTime format="YYYY-MM-DD HH:mm:ss"/>
                    </Form.Item>

                    <Form.Item
                      label="内容"
                      name="content"
                      rules={[{required: true, message: '请输入内容!'}]}
                    >
                      <TextArea style={{height: '150px'}}/>
                    </Form.Item>
                  </Form>
                </Modal>
              </Card>
            </div>
          </div>
        </div>
        </Spin>
      </PageContainer>
    );
  }
}
